<div>
  <link rel="stylesheet" href="https://lib.baomitu.com/element-plus/2.2.0/index.min.css">
</div>
<div id="player-settings-ext">
  <el-dialog v-model="settingsVisible" title="弹幕填充" width="60%">
    <el-tabs
        v-model="activeName"
        type="card"
        class="demo-tabs"
        @tab-click="handleClick"
      >
      <el-tab-pane label="B站" name="bilibili">
      </el-tab-pane>
      <el-tab-pane label="弹弹Play" name="dandanplay">
      </el-tab-pane>
    </el-tabs>
    <div>
      <el-row>
        <el-col :span="4" class="flex_center">搜索:</el-col>
        <el-col :span="19">
          <el-input v-model="searchStr" @change="doSearch"></el-input>
        </el-col>
      </el-row>
      <span style="display:block;height: 10px;"></span>
      <el-row>
        <el-col :span="4" class="flex_center">结果：</el-col>
        <el-col :span="19">
          <el-cascader-panel v-model="selectOptions" :options="searchResult" ></el-cascader-panel>
        </el-col>
      </el-row>
      <span style="display:block;height: 10px;"></span>
      <el-row>
        <el-col :span="4" class="flex_center">第三方弹幕：</el-col>
        <el-col :span="19">
          <el-switch v-model="dandanplayWithRelated" :disabled="activeName === 'bilibili'" />
        </el-col>
      </el-row>
      <span style="display:block;height: 10px;"></span>
      <el-row>
        <el-col :span="4" class="flex_center">模式：</el-col>
        <el-col :span="19">
          <el-radio-group v-model="damakuMode" :disabled="activeName === 'bilibili'">
            <el-radio label="1">替换弹幕池</el-radio>
            <el-radio label="2">追加弹幕池</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="settingsVisible = false">取消</el-button>
        <el-button type="primary" @click="doConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-drawer
    v-model="dmTimelineDrawer"
    title="弹幕时间轴调整"
    direction="btt"
  >
    <el-row>
      <el-col :span="4" class="flex_center">
        时间轴偏移：
      </el-col>
      <el-col :span="19">
        <el-input-number v-model="moveFactor" :disabled="true" ></el-input-number>
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-col :span="4" class="flex_center">
        时间轴调整：
      </el-col>
      <el-col :span="19">
        <el-button @click="dmTimelineMove(-5)" title="所有弹幕左移5s">&lt;&lt;&nbsp;5s</el-button>
        <el-button @click="dmTimelineMove(-1)" title="所有弹幕左移1s">&lt;&lt;&nbsp;1s</el-button>
        <el-button @click="dmTimelineMove(1)" title="所有弹幕右移1s">&gt;&gt;&nbsp;1s</el-button>
        <el-button @click="dmTimelineMove(5)" title="所有弹幕右移5s">&gt;&gt;&nbsp;5s</el-button>
      </el-col>
    </el-row>
  </el-drawer>
</div>